<template>
  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
      <slot></slot>
    </div>
    <div class="scroll-prev" @click="handlePrev">
      <i class="fa fa-angle-left" aria-hidden="true"></i>
    </div>
    <div class="scroll-next" @click="handleNext">
      <i class="fa fa-angle-right" aria-hidden="true"></i>
    </div>
  </div>
</template>
<script>

/*#region 导入函数*/
const padding = 15; // tag's padding

/*#endregion*/

export default{
  name: "ScrollPane",
  methods: {

    /*#region 自定义函数(组件change事件等)*/
    moveToTarget($target) {
      const $container = this.$refs.scrollContainer;
      const $containerWidth = $container.offsetWidth;
      const $targetLeft = $target.offsetLeft;
      const $targetWidth = $target.offsetWidth;

      if ($targetLeft < -this.left) {
        // tag in the left
        this.left = -$targetLeft + padding;
      } else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) {
        // tag in the current view
        // eslint-disable-line
      } else {
        // tag in the right
        this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding);
      }
    },

    /*#endregion*/

    /*#region 数据提交事件*/

    /*#endregion*/

    /*#region 操作函数(handle)*/
    handleScroll(e) {
      const eventDelta = e.wheelDelta || -e.deltaY * 3;
      const $container = this.$refs.scrollContainer;
      const $containerWidth = $container.offsetWidth;
      const $wrapper = this.$refs.scrollWrapper;
      const $wrapperWidth = $wrapper.offsetWidth;

      if (eventDelta > 0) {
        this.left = Math.min(0, this.left + eventDelta);
      } else {
        if ($containerWidth - padding < $wrapperWidth) {
          if (this.left < -($wrapperWidth - $containerWidth + padding)) {
            // this.left = this.left;
          } else {
            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding);
          }
        } else {
          this.left = 0;
        }
      }
    },
    handlePrev(e) {
      this.left = 0;
    },
    handleNext(e) {
      const $container = this.$refs.scrollContainer;
      const $containerWidth = $container.offsetWidth;
      const $wrapper = this.$refs.scrollWrapper;
      const $wrapperWidth = $wrapper.offsetWidth;
      this.left = - ($wrapperWidth - $containerWidth + padding);
    }
 
    /*#endregion*/

    /*#region 获取数据*/

     /*#endregion*/

  },

  /*#region 生命周期函数(created、mount、等)*/

  /*#endregion*/

  /*#region 注册绑定数据*/

  computed: {
    visible() {
      const $container = this.$refs.scrollContainer || {offsetWidth: 0, clientWidth: 0};
      const $containerWidth = $container.clientWidth || $container.offsetWidth || 0;
      const $wrapper = this.$refs.scrollWrapper || {offsetWidth: 0, clientWidth: 0};
      const $wrapperWidth = $wrapper.clientWidth || $wrapper.offsetWidth || 0;
      return $wrapperWidth > $containerWidth;
    }
  },
  data() {
    return {
      left: 0
    }
  }

  /*#endregion */

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .scroll-container {
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    width: 100%;
    .scroll-wrapper {
      position: absolute;
      padding: 0 10px;
    }

    > .scroll-prev,
    > .scroll-next{
      display: inline-block;
      position: absolute;
      height:100%;
      width: 20px;
      text-align: center;
      background-color: #ffffff;
      cursor:pointer;
      & .fa{
        font-size: 18px;
        line-height: 36px;
        color: #bdbdbd;
      }
    }

    > .scroll-prev {
      left: 0;
      top: 0;
    }
    > .scroll-next {
      right: 0;
      bottom: 0;
    }
  }
</style>
